<template>
  <div class="articlescolumns">
    <NavBar></NavBar>
    <div class="content">
      <div :key="index" v-for="(item, index) in article" class="content-left">
        <div class="article-header">
          <div class="article-header-text">{{item.title}}</div>
          <div class="article-header-tag">
            <el-tag :key="index2" v-for="(item2,index2) in item.tags" :type="item2.type">{{item2.tagName}}</el-tag>
            <el-button
              type="primary"
              size="small"
              @click="handleChange()"
              effect="dark"
              >下载</el-button
            >
          </div>
        </div>
        <div class="article-info">
          <p>
            {{ item.txt }}
          </p>
        </div>
      </div>
      <HotList></HotList>
    </div>
  </div>
</template>

<script>
import NavBar from "../components//NavBar.vue";
// 热门组件
import HotList from "../components/HotList.vue";
export default {
  data() {
    return {
      article: [
        {
          title: "高等数学",
          txt: "填充文本高等数学是指相对于初等数学和中等数学而言，数学的对象及方法较为繁杂的一部分，中学的代数 、 几何 以及简单的 集合论 初步、 逻辑 初步称为 中等数学，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。通常认为，高等数学是由 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。 主要内容包括： 数列 、极限 、 微积分 、 空间解析几何 与 线性代数 、 级数 、 常微分方程 。工科 、 理科 、 财经 类研究生考试的基础科目。通常认为，高等数学是由17世纪后 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。高等数学是指相对于初等数学和中等数学而言，数学的对象及方法较为繁杂的一部分，中学的代数 、 几何 以及简单的 集合论 初步、 逻辑 初步称为 中等数学，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。通常认为，高等数学是由 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。 主要内容包括： 数列 、极限 、 微积分 、 空间解析几何 与 线性代数 、 级数 、 常微分方程 。工科 、 理科 、 财经 类研究生考试的基础科目。通常认为，高等数学是由17世纪后 微积分学 ，较深入的 代数 学、 几何学及它们之间的交叉内容所形成的一门基础学科。高等数学是指相对于初等数学和中等数学而言，数学的对象及方法较为繁杂的一部分，中学的代数 、 几何 以及简单的 集合论 初步、 逻辑 初步称为 中等数学，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。通常认为，高等数学是由 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。 主要内容包括： 数列 、极限 、 微积分 、 空间解析几何 与 线性代数 、 级数 、 常微分方程 。工科 、 理科 、 财经 类研究生考试的基础科目。通常认为，高等数学是由17世纪后 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。高等数学是指相对于初等数学和中等数学而言，数学的对象及方法较为繁杂的一部分，中学的代数 、 几何 以及简单的 集合论 初步、 逻辑 初步称为 中等数学，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。通常认为，高等数学是由 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。 主要内容包括： 数列 、极限 、 微积分 、 空间解析几何 与 线性代数 、 级数 、 常微分方程 。工科 、 理科 、 财经 类研究生考试的基础科目。通常认为，高等数学是由17世纪后 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。高等数学是指相对于初等数学和中等数学而言，数学的对象及方法较为繁杂的一部分，中学的代数 、 几何 以及简单的 集合论 初步、 逻辑 初步称为 中等数学，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。通常认为，高等数学是由 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。 主要内容包括： 数列 、极限 、 微积分 、 空间解析几何 与 线性代数 、 级数 、 常微分方程 。工科 、 理科 、 财经 类研究生考试的基础科目。通常认为，高等数学是由17世纪后 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。高等数学是指相对于初等数学和中等数学而言，数学的对象及方法较为繁杂的一部分，中学的代数 、 几何 以及简单的 集合论 初步、 逻辑 初步称为 中等数学，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。通常认为，高等数学是由 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。 主要内容包括： 数列 、极限 、 微积分 、 空间解析几何 与 线性代数 、 级数 、 常微分方程 。工科 、 理科 、 财经 类研究生考试的基础科目。通常认为，高等数学是由17世纪后 微积分学 ，较深入的 代数 学、 几何学以及它们之间的交叉内容所形成的一门基础学科。",
          tags: [{tagName: "word", type: ""},{tagName: "高数", type: "success"},{tagName: "同济大学", type: "info"},]
        },
      ],
    };
  },
  components: {
    NavBar,
    HotList,
  },
  methods: {
    handleChange() {
      console.log("点击了下载");
    },
  },
};
</script>

<style lang="scss" scoped>
.articlescolumns {
  /* 取消横向滚动条 */
  overflow-x: hidden;
  background: #f0f2f5;
  color: #707070;
}
.content {
  display: flex;
  justify-content: center;
  margin: 23px 0 100px 0;
  font-size: 16px;
}

.content-left {
  width: 700px;
  margin-right: 23px;
  background: #fff;
  border-radius: 8px;
}
.content-left:hover {
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
}
.article-info {
  // 去除标点符号首行显示
  // word-wrap: break-word;
  // table-layout: fixed;
  word-break: normal;
  text-align: justify;
}
.article-header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f2f5;
}
.article-header-tag > .el-tag + .el-tag {
  margin-left: 10px;
}
.article-header-tag > .el-button {
  margin-left: 10px;
}

.article-info {
  padding: 24px;
}
</style>